<template>
  <base-breadcrumb :breadcrumb="!isAudit">
    <div class="about-master-container">
      <b-steps
        :current="stepVal"
        direction="vertical"
        @change.self="stepChange"
      >
        <b-step title="基本信息">
          <a-card
            v-show="activeKey[0]"
            slot="description"
            v-loading="loading"
            :bordered="false"
          >
            <a-form-model
              ref="ruleForm"
              :model="formData"
              :rules="rules"
            >
              <a-row>
                <a-col span="8">
                  <a-form-model-item label="物资用量确认单编码">
                    <BaseInput
                      v-model="formData.code"
                      disabled
                    />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item
                    label="合同编号"
                    prop="contractCode"
                  >
                    <a-input-search
                      v-model="formData.contractCode"
                      placeholder="请选择"
                      :disabled="state === 3"
                      @search="onSearch"
                      @click="onSearch"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="合同名称">
                    <BaseInput
                      v-model="formData.contractName"
                      disabled
                    />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="合同类别">
                    <a-select
                      v-model="formData.contractTypeId"
                      disabled
                    >
                      <a-select-option
                        v-for="item in typeArr"
                        :key="item.id"
                        :value="item.id"
                      >
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="工程名称">
                    <a-select
                      v-model="formData.constructionTypeId"
                      disabled
                    >
                      <a-select-option
                        v-for="item in programmeArr"
                        :key="item.id"
                        :value="item.id"
                      >
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item
                    label="项目名称"
                    prop="projectId"
                  >
                    <SelectDownProject
                      v-model="formData.projectId"
                      :disabled="state === 3"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="供应商名称">
                    <BaseInput
                      v-model="formData.supplier"
                      disabled
                    />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="供应商编码">
                    <BaseInput
                      v-model="formData.supplierCode"
                      disabled
                    />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="创建人">
                    <BaseInput
                      v-model="formData.creatorName"
                      disabled
                    />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="创建时间">
                    <BaseInput
                      v-model="formData.createTime"
                      disabled
                    />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-form-model>
            <div
              v-if="!isAudit"
              class="pub-next-btn"
            >
              <a-button
                v-if="state !== 3"
                type="primary"
                @click="temporaryStorage()"
              >
                保存草稿
              </a-button>
              <a-button
                type="primary"
                @click="temporaryStorage(true)"
              >
                下一步
              </a-button>
            </div>
          </a-card>
        </b-step>
        <b-step title="用量明细">
          <a-card
            v-if="activeKey[1]"
            slot="description"
            :bordered="false"
          >
            <materials
              ref="materials"
              :state="state"
              :row="row ? row : null"
              :disabled="isAudit || state == 3"
            />
            <div
              class="pub-next-btn"
            >
              <a-button
                type="primary"
                @click="previous"
              >
                上一步
              </a-button>
              <a-button
                type="primary"
                :disabled="!row"
                @click="next"
              >
                下一步
              </a-button>
            </div>
          </a-card>
        </b-step>
        <b-step title="相关附件">
          <a-card
            v-if="activeKey[2]"
            slot="description"
            :bordered="false"
          >
            <u-table
              :upload-list="addFile"
              :delete-url="fileDel"
              :isDelete="!isAudit"
              :is-show="state !== 3"
              :list-url="fileList"
              :business-id="row.id"
              business-code="MM14"
            />
            <div
              v-if="!isAudit"
              class="pub-next-btn"
            >
              <a-button
                type="primary"
                @click="previous"
              >
                上一步
              </a-button>
            </div>
          </a-card>
        </b-step>
      </b-steps>
      <div
        v-if="!isAudit"
        class="pub-header-btn"
      >
        <a-button
          v-if="state !== 3"
          :loading="loading"
          type="primary"
          @click="submit"
        >
          提交
        </a-button>
        <a-button
          v-checkVisibleInDetail
          @click="$close"
        >
          关闭
        </a-button>
      </div>
      <div
        v-if="isAudit"
        class="pub-header-btn"
      >
        <a-button
          v-checkVisibleInDetail
          @click="$close"
        >
          关闭
        </a-button>
      </div>
      <contract-list
        ref="contractList"
        @getContract="getContract"
        :customApi="contractListApi"
      />

    </div>
  </base-breadcrumb>
</template>
<script>
import {
  dosageListAdd,
  dosageListEdit,
  audit,
  addFile,
  fileList,
  fileDel,
  dosageListDetail
} from '@/api/material/acceptance/dosage'
import { selectOption } from '@/api/material/goods/goods'
import materials from '../components/materials/materials'
import { themeChoose } from '@/mixin/mixin'
import SelectDownProject from '@/components/Select/SelectDownProject'
import { contractListForUse } from '@/api/material/public/public'

export default {
  name: 'a' + Date.now(),
  components: {
    materials,
    SelectDownProject
  },
  props: {
    isAudit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      contractListApi: contractListForUse,
      activeKey: [true, false, false, false, false, false, false],
      loading: false,
      stepVal: 0,
      state: Number(this.$route.query.state),
      isSubmit: false,
      row: this.$route.query.row,
      formData: {
        createTime: this.getNowTime(),
        creatorName: JSON.parse(sessionStorage.getItem('ycloud-user_info')).name,
        code: '',
        contractCode: '',
        contractName: '',
        contractTypeId: null,
        constructionTypeId: null,
        projectId: null,
        projectCode: '',
        projectName: '',
        supplier: '',
        supplierCode: '',
        contractId: null
      },
      rules: {
        contractCode: { required: true, message: '请选择合同编号', trigger: 'change' },
        projectId: { required: true, message: '请选择项目名称', trigger: 'change' }
      },
      typeArr: [],
      isNext: false,
      addFile: addFile(),
      fileDel: fileDel(),
      fileList: fileList(),
      programmeArr: []
    }
  },
  watch: {
    isAudit: {
      immediate: true,
      handler(val) {
        if (val) {
          this.state = 3
        }
      }
    },
    stepVal(newVal, oldVal) {
      this.$set(this.activeKey, newVal, true)
    }
  },
  mounted: function() {
    let _this = this
    _this.getType()
    _this.getProgramme()
    _this.$nextTick(() => {
      if (_this.state && _this.state !== 1) {
        _this.getEditInfo()
        _this.isSubmit = true
      }
    })
  },
  methods: {
    previous: function() {
      this.isNext = true
      this.stepVal--
      if (this.stepVal < 0) {
        this.stepVal = 0
      }
    },
    getContract: function(row) {
      this.formData.contractName = row.name
      this.formData.contractCode = row.code
      this.formData.contractTypeId = row.contractTypeId
      this.formData.constructionTypeId = row.constructionTypeId
      this.formData.supplier = row.supplier
      this.formData.supplierCode = row.supplierCode
      this.formData.supplierId = row.supplierId
      this.formData.contractId = row.id
    },
    projectChange(val) {
      this.project.map((item) => {
        if (item.code === val) {
          this.formData.projectCode = val
          this.formData.projectName = item.name
        }
      })
    },
    getProgramme: function() {
      let _this = this
      selectOption({
        type: 18
      }).then(res => {
        if (res.code === 200) {
          _this.programmeArr = res.data
        }
      })
    },
    commentsVal: function(val) {
      this.formData.reviewContent = val
    },
    fileArrysData: function(val) {
      this.formData.commonFileId = val[0].commonId
    },
    getTotal: function(total) {
      this.formData.contractPrice = total.sumTotal
    },
    getSign: function(selectRow) {
      this.formData.countersignCode = selectRow.countersignCode
      this.formData.constructionTypeId = selectRow.wbsId
      this.formData.countersignId = selectRow.id
    },
    searchSupplier: function() {
      this.$refs.supplierList.open()
    },
    getSupplier: function(selectRow) {
      this.formData.supplier = selectRow.name
      this.formData.supplierCode = selectRow.code
      this.formData.supplierId = selectRow.id
    },
    onSearch: function(val) {
      this.$refs.contractList.open()
    },
    getType: function() {
      let _this = this
      selectOption({
        type: 14
      }).then(res => {
        if (res.code === 200) {
          _this.typeArr = res.data
        }
      })
    },
    stepChange: function(val) {
      if (!this.row && !this.isAudit) {
        if (val) {
          this.$message.warning('切换步骤前请先填写基本信息')
          this.stepVal = 0
        }
      } else {
        if (!this.isNext) {
          this.$set(this.activeKey, val, !this.activeKey[val])
        }
      }
      this.isNext = false
    },
    // 获取编辑回显数据
    async getEditInfo() {
      const params = {
        id: this.$route.query.id || this.row.id
      }
      this.loading = true
      const res = await dosageListDetail(params)
      if (res.code === 200) {
        this.row = res.data || {}
        this.formData = this.$assign(this.formData, this.row)
        this.$console(this.formData)
      }
      this.loading = false
    },
    submit() {
      // this.save('approve');
      if (this.isSubmit) {
        this.$submitConfirm(() => {
          this.loading = true
          audit({
            baseId: this.row.id,
            auditStatus: this.row.auditStatus
          }).then(res => {
            this.loading = false
            if (res.code === this.SUCCESS_CODE) {
              this.$message.success('提交成功')
              this.$router.push({ path: '/legal/branch-contract/dosage' })
            }
          })
        })
      } else {
        this.$message.warning('提交之前请先暂存')
      }
    },
    temporaryStorage(isNext) {
      if (this.state === 3) {
        this.next()
        return
      }
      this.$refs.ruleForm.validate((valid, object) => {
        if (valid) {
          this.loading = true
          if (this.state === 2 || this.row) {
            this.formData.id = this.row.id
            dosageListEdit(this.formData).then(res => {
              if (res.code === 200) {
                this.$message.success('暂存成功')
                this.isSubmit = true
                if (isNext) {
                  this.next()
                }
              }
              this.loading = false
            })
          } else {
            dosageListAdd(this.formData).then(res => {
              if (res.code === 200) {
                this.row = res.data
                this.$message.success('暂存成功')
                this.isSubmit = true
                this.getEditInfo()
                if (isNext) {
                  this.next()
                }
              }
              this.loading = false
            })
          }
        } else {
          this.$message.warning("请填写完所有必填项信息")
          return false
        }
      })
    },
    next: function(val) {
      this.isNext = true
      this.stepVal++
    }
  }
}
</script>
